import { useState } from 'react';

export const FeaturedArticles = () => {
  const articles = [
    {
      image: 'https://picsum.photos/1000/600?random=10',
      title: 'Best Blood Glucose Monitors of 2025',
      excerpt: 'Our experts tested the top glucose monitors for accuracy, ease of use, and data management. The latest 2025 models feature improved connectivity options and longer battery life compared to previous generations.',
      category: 'Diabetes Care',
      link: '/reviews/blood-glucose-monitors'
    },
    {
      image: 'https://picsum.photos/1000/600?random=11',
      title: 'How to Choose the Best Heating Pad for Arthritis (2025 Guide)',
      excerpt: 'Find relief with our comprehensive guide to heating pads specifically designed for joint pain. Our 2025 update includes the newest technologies in heat therapy and smart temperature control systems for optimal pain management.',
      category: 'Pain Management',
      link: '/buying-guides/heating-pads-arthritis'
    },
    {
      image: 'https://picsum.photos/1000/600?random=12',
      title: 'Comparing Professional vs. Home Blood Pressure Monitors (2025)',
      excerpt: 'Learn the key differences and find out which type is right for your needs. This 2025 comparison includes the latest advancements in wearable monitoring technology and AI-assisted health tracking systems.',
      category: 'Heart Health',
      link: '/reviews/blood-pressure-monitors'
    }
  ];

  const [expandedCards, setExpandedCards] = useState<Set<number>>(new Set());

  const toggleExpanded = (index: number, e: React.MouseEvent) => {
    e.preventDefault(); // 防止链接跳转
    e.stopPropagation();
    const newExpanded = new Set(expandedCards);
    if (newExpanded.has(index)) {
      newExpanded.delete(index);
    } else {
      newExpanded.add(index);
    }
    setExpandedCards(newExpanded);
  };

  const truncateText = (text: string, maxLength: number) => {
    if (text.length <= maxLength) return text;
    return text.substring(0, maxLength).trim() + '...';
  };
  return (
    <div className="bg-white py-16">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center">
          <h2 className="text-3xl font-bold text-[#0e4c92]">
            Featured Articles & Reviews
          </h2>
          <p className="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">
            In-depth analysis and expert recommendations to help you make
            informed decisions
          </p>
        </div>
        <div className="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
          {articles.map((article, index) => {
            const isExpanded = expandedCards.has(index);
            const needsTruncation = article.excerpt.length > 150;
            const displayText = needsTruncation && !isExpanded 
              ? truncateText(article.excerpt, 150) 
              : article.excerpt;

            return (
              <div
                key={index}
                className="flex flex-col overflow-hidden rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 bg-white"
              >
                <div className="flex-shrink-0">
                  <img 
                    className="h-48 w-full object-cover" 
                    src={article.image} 
                    alt={article.title} 
                  />
                </div>
                <div className="flex-1 p-6 flex flex-col">
                  <div className="flex-1">
                    <p className="text-sm font-medium text-[#5cb8b2]">
                      {article.category}
                    </p>
                    <h3 className="mt-2 text-xl font-semibold text-[#0e4c92]">
                      {article.title}
                    </h3>
                    <div className="mt-3">
                      <p className="text-gray-600 leading-relaxed">
                        {displayText}
                      </p>
                      {needsTruncation && (
                        <button
                          onClick={(e) => toggleExpanded(index, e)}
                          className="mt-2 text-[#5cb8b2] hover:text-[#4a9d96] font-medium text-sm transition-colors duration-200"
                        >
                          {isExpanded ? 'Show Less' : 'Read More'}
                        </button>
                      )}
                    </div>
                  </div>
                  <div className="mt-6 pt-4 border-t border-gray-100">
                    <a 
                      href={article.link}
                      className="inline-flex items-center text-[#ff8c7a] hover:text-[#ff7c68] font-medium transition-colors duration-200"
                    >
                      Read Full Article →
                    </a>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        <div className="mt-12 text-center">
          <a href="/reviews" className="inline-flex items-center justify-center px-6 py-3 border border-[#0e4c92] text-base font-medium rounded-md text-[#0e4c92] bg-white hover:bg-gray-50 transition duration-150">
            View All Articles
          </a>
        </div>
      </div>
    </div>
  );
};